<template>
  <div class="container">
    <el-form
      ref="from"
      :model="formValue"
      :inline="true"
    >
      <el-form-item
        v-for="(item, index) in forms.form"
        :key="index"
        :label="item.label || ''"
      >
        <el-input 
          v-if="item.type === 'input'"
          v-model="formValue[item.key]"
          size="mini"
          clearable
          :placeholder="item.placeholder"
        />
        <el-date-picker
          v-else-if="item.type === 'datePicker'"
          v-model="formValue[item.key]"
          size="mini"
          clearable
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :type="item.rangeType"
          :format="item.format || 'yyyy-MM-dd'"
          :value-format="item.valueFormat || 'yyyy-MM-dd'"
        />
        <el-select
          v-else-if="item.type === 'select' && !item.asyncFunc"
          v-model="formValue[item.key]"
          size="mini"
          clearable
          :placeholder="item.placeholder"
        >
          <el-option
            v-for="(option, index) in item.options"
            :key="index"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <AsyncSelect
          v-else-if="item.type === 'select' && item.asyncFunc"
          :form="item"
          v-model="formValue[item.key]"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import AsyncSelect  from "./components/AsyncSelect";
export default {
  props: {
    forms: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    AsyncSelect
  },
  data() {
    const form = {}
    this.forms && this.forms.form.forEach(item => {
      if (item.default === 0) {
        form[item.key] = item.default
      } else {
        form[item.key] = item.default || ''
      }
    })
    return {
      formValue: form
    }
  },
  created() {
  },
  methods: {
   handleSearch() {
     const params = {}
     for (const key in this.formValue) {
       if (this.formValue[key] !== '' && this.formValue[key] !== []) {
         params[key] = this.formValue[key]
       }
     } 
     this.$emit('handleSearch', params)
   },
   handleReset() {
     for (const key in this.formValue) {
       this.formValue[key] = ''
     }
     this.$emit('handleReset')
   }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    margin-left: 20px;
    ::v-deep .el-form {
      height: 50px;
    }
    ::v-deep .el-input--mini {
      width: 160px
    }
    ::v-deep .el-range-editor--mini {
      width: 340px
    }
  }
</style>